<template>
  <div class="page-main">
    <!-- <div class="header">
      <div class="title">{{ title || default_title }}</div>
      <div class="tool"><slot name="right"/></div>
    </div> -->
    <div class="app-container" :style="{height:domHeight+'px'}">
      <slot/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PageMain',
  props: {
    title: {
      type: String,
      default: ''
    }
  },
  data(){
      return{
          default_title: null,
          domHeight: 0,
          winHeight: document.body.clientHeight
      }
  },
  created(){
      // this.default_title = this.$route.meta.title;
      this.default_title = this.$route.name;
      console.log(this.winHeight);
      this.domHeight = this.winHeight - 66 - 48*2 + 10;
  },
  watch:{
    winHeight(newVal,oldVal){
      this.domHeight = newVal - 66 - 48*2;
      console.log(newVal);
    }
  },
  mounted(){
    window.onresize = () => {
      return ( () => {
        this.winHeight = document.documentElement.clientHeight;
      })()
    }
  }
}
</script>
